<template>
   <div class="cartcontrol">
        <transition name="move">
            <div class="cart-decrease icon-remove_circle_outline" v-show="food.count>0" @click="decreaseCart"></div>
        </transition>
        <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
        <div class="cart-add icon-add_circle" @click="addCart"></div>
   </div>
</template>

<script>
import Vue from 'vue';

export default {
    props:{
        food:{
            type: Object
        }
    },
    created(){

    },
    methods:{
        addCart(event){
            if(!event._constructed){
                return;
            }//阻止多次执行
            
            if(!this.food.count){
                Vue.set(this.food,'count',1);
               // this.food.count = 1; 当变量属性不存在时要监听，用vue.set方法添加
            }else{
                this.food.count++;
            }
          //  this.$dispatch('cart.add',event.target);
        },
        decreaseCart(event){
            if(!event._constructed){
                return;
            }//阻止多次执行
            if(this.food.count){
                this.food.count--;
            }
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
.cartcontrol{
    font-size:0;
    .move-enter-active, .move-leave-active {
        opacity: 1;
        transform : translate3d(0,0,0);
    }
    .move-enter, .move-leave-active {
        opacity: 0;
        transform : translate3d(24px,0,0);
    }
    .cart-decrease{
        display:inline-block;
        padding:6px;
        line-height:24px;
        font-size:24px;
        color:rgb(0 ,160,220);
        transition:all 0.2s linear;
    }
    .cart-count{
        display:inline-block;
        vertical-align: top;
        width:12px;
        padding-top:6px;
        line-height:24px;
        text-align:center;
        font-size:10px;
        color:rgb(147,153,159);
    }
    .cart-add{
        padding:6px;
        line-height:24px;
        font-size:24px;
        display:inline-block;
        color:rgb(0 ,160,220);
    }
}

</style>

